<template>
	<el-header class="nopadding exSearchTree_header">
		<div style="padding-left: 3px;">{{this.title}}</div>
	</el-header>
	<el-main class="nopadding treemain"  :style="setheight()">
	<div style="width: 100%;height: 50px;line-height: 50px;">
		<el-input size="small" v-model="filterText" :placeholder="this.$t('common.search_tip')" clearable  class="exSearchTree_search_tip"/>
	</div>
	<div style="width: 100%;" v-loading="loading">
		<el-tree
			ref="tree"
			class="exSearchTree_tree_main"
			:data="tree_data"
			:props="defaultProps"
			:load="loadNode"
			node-key="levelCode"
			highlight-current
			:default-expanded-keys="[defaultcode]"
			accordion		
			:expand-on-click-node="false"
			:filter-node-method="filterNode"
			@current-change="currentChange"
			icon="el-icon-caret-right"
		>
			<template #default="{ node, data }">
				<element-tree-line v-if="data.label!='默认所有'"
                :node="node"
                :showLabelLine="true"
                :indent="treeIndent">
					<span class="custom-tree-node">
						<el-icon class="treeicon" v-if="data.children"><component :is="icons[0]"/></el-icon>
						<el-icon class="treeicon" v-if="!data.children"><component :is="icons[1]"/></el-icon>
						<el-tooltip effect="dark" :content="data.label" placement="top-start" 
						:show-after="500"
						style="font-size:14px;">
							
							<span class="el-tree-node__label">
							<template v-if="data.childrenCount">
								{{ data.label }}
			<!--					({{ data.childrenCount}},{{ data.allCount}})-->
							</template>
							<template v-else>{{ data.label }}</template>
						</span>
						</el-tooltip>
						
					</span>
				</element-tree-line>
				<span class="custom-tree-node" v-if="data.label=='默认所有'">
					<el-icon class="treeicon"><component :is="icons[0]"/></el-icon>
					<el-tooltip effect="dark" :content="data.label" placement="top-start" 
						:show-after="500"
						style="font-size:14px;">
						<span class="el-tree-node__label">
						<template v-if="data.childrenCount">
							{{ data.label }}
						</template>
						<template v-else>{{ data.label }}</template>
						
					</span>
					</el-tooltip>
				</span>
			</template>
		</el-tree>
	</div>
	</el-main>


</template>

<script>
import { getElementLabelLine } from 'element-tree-line';
    import 'element-tree-line/dist/style.css';
    import { h } from 'vue';
	import * as scIcons from '@/components/icons'
export default {
	name: "exSearchTree",
	props: {
		tree_class: {type: String, default: 'filter-tree'},
		treeApi: {type: Object, default: {}},//数据加载的url
		param: {type: Object, default: null},//搜索参数
		treeIndent: {type: Number , default: 1},
		title: {type: String, default: ''},
		defaultcode: {type: String, default: '0000000'},
		defaultwidth: {type: Number, default: 0},
	},
	components: { ElementTreeLine: getElementLabelLine(h) },
	data() {
		return {
			treeIndent: 15,
			loading: false,
			defaultProps: {
				children: 'children',
				label: 'label',
				isLeaf: this.isLeaf,
			},
			filterText: null,
			tree_data: [],
			ori_data: [],
			entity: this.$store.state.entity,
			oldEntity: {},
			icons: [],
			treeheight:0,		
		}
	},
	watch: {
		filterText(newVal) {
			this.$refs.tree.filter(newVal);
		},
		entity: {
			handler(val) {
				for (let key in val) {
					if (key === this.treeApi.storeName) {
						if (!this.oldEntity[key] || this.oldEntity[key].count !== val[key].count) {
							this.refresh({toServer: true});
						}
					}
				}
				this.oldEntity = this.$TOOL.objCopy(val);
			},
			deep: true,
			immediate: false,
		}
	},
	computed: {},
	created() {
		this.onLayoutResize();
		window.addEventListener('resize', this.onLayoutResize);
	},
	mounted() {
		this.refresh();		
		for(let icon in scIcons){			
			this.icons.push('dy-icon'+icon.replace(/[A-Z]/g,(match)=>'-'+match.toLowerCase()))
		}
	},
	methods: {
		setheight(){

			if(this.defaultwidth==0){
				return "height:"+(this.treeheight)+"px;"				
			}else{
				return "height:"+(this.treeheight)+"px;width:"+(this.defaultwidth)+"px"
			}
			
			//return "height:"+(window.innerHeight-50-70-68)+"px"
		},
		onLayoutResize() {
			this.treeheight=window.innerHeight-50-70-68;
			
		},
		isLeaf(data, node) {
			return data.isLeaf;
		},
		loadNode(node, resolve) {
			if (node.level === 0) {
				resolve(this.tree_data);
			} else {
				let data = [];
				if(node.data.levelCode==="0000000"){
					data = this.ori_data
				}else{
					data = node.data.children;
				}
				let finalData = [];
				data.forEach(item=>{
					item.isLeaf = !item.children||item.children.length===0;
					// if(!item.isLeaf){
						finalData.push(item);
					// }
				});
				resolve(finalData);
			}
		},
		filterNode(value, data) {
			if (!value) return true
			return data.label.includes(value)
		},
		currentChange(data) {
			this.$emit("changeHandler", data);
		},
		async refresh(data) {
			this.loading = true;
			if (this.treeApi) {
				let root = {};
				root.id = "";
				root.levelCode = "0000000";
				root.parentLevelCode = root.levelCode;
				root.pathCode = root.parentLevelCode + "," + root.levelCode;
				root.label = this.$t("common.default_all");
				root.icon = "el-icon-folder"
				root.children=[];
				root.isEnabled = "1";
				let queryParams = {parentLevelCode: root.levelCode};
				//引入自定义参数
				if (data) {
					queryParams = Object.assign(queryParams, data);
				}
				if (this.param) {
					queryParams = Object.assign(queryParams, this.param);
				}
				//请求数据加载
				let result = await this.$cache.tree.reload(this.treeApi.storeName, queryParams);				
				if (result) {
					this.ori_data = result;
          			root.children = result;
					root.isLeaf = result.length===0;
					let treeData = [];
					treeData.push(root);
					this.tree_data = treeData;
				}
			}
			this.loading = false;
		}
	}
}
</script>

<style>

/*树组件样式*/
.exSearchTree_header{
	height: 62px;line-height: 62px;background-color: #fff;
	font-size: 14px;
	border-bottom: 1px #CCC solid;
	
}

.exSearchTree_search_tip{
	width: 94%;
	line-height: 35px;
	height: 35px;
	border-radius: 20px;
	margin-left: 3%;
}
.treemain{
	background-color: #fff;
	scrollbar-color: rgba(193,193,193,1) rgba(241,241,241,1);

}

.exSearchTree_tree_main{
	background-color: #fff;
	height: 100px;

}

.el-tree-node__label{
	font-size:13.5px !important;
	
	margin-left: 5px;
}
/*搜索框*/
.exSearch_search_tip{
	line-height: 35px;
	height: 35px;
	border-radius: 8px;
}


.el-tree-node__label {
	width: 80%;
	margin-left: 22px !important;
}

.el-tree .el-tree-node__expand-icon{
	
	font-size: 13px !important;
	padding: 3px !important;
	margin-top:2px;
}

.el-tree .el-tree-node__expand-icon.expanded{
	color: #000 !important;
}

.el-tree-node__content {
	height: 24px;
	line-height: 24px;

}


.el-tree-node .is-focusable:before {
	content: "";
	display: inline-block;
	position: absolute;
	left: -15px;
	border-left: 1px solid #e5e7ec;
	height: calc(100% + 3px);
}
.el-tree-node .treeicon{
	color: #427CFF;
	margin-top: 2px;
	font-size: 24px;
	padding: 0px !important;
	position: absolute;
}
.el-tree-node .node__label{
	padding-left: 20px;
}


.element-tree-node-line-ver{
	left: 10px;
}
.element-tree-node-line-hor{
	left: 10px;
}

.treetooltip{
	position: fixed;
		min-width: 100px;
		max-width: 200px;
		margin:0;
		border-radius: 0px;
		background: var(--el-bg-color-overlay);
		border: 1px solid var(--el-border-color-light);
		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
		z-index: 3000;
		list-style-type: none;
		padding: 10px 10px;
		
}



</style>
